<form id="add-import-endpoint"
      class="tlp-modal"
      role="dialog"
      aria-labelledby="add-modal-label"
      method="post"
      action="/admin/tuleap_synchro/add_endpoint">

    {{# csrf_token_add }}
        {{> csrf_token_input }}
    {{/ csrf_token_add }}

    <div class="tlp-modal-header">
        <h1 class="tlp-modal-title" id="add-modal-label">
            <i class="fa fa-plus tlp-modal-title-icon"></i>
            {{# dgettext }} tuleap-tuleap_synchro | Add new import endpoint{{/ dgettext }}
        </h1>
        <div class="tlp-modal-close" data-dismiss="modal" aria-label="{{# dgettext }} tuleap-tuleap_synchro | Close{{/ dgettext }}">
            &times;
        </div>
    </div>

    <div class="tlp-modal-body">
            <h2 class="tlp-modal-subtitle">
                {{# dgettext }} tuleap-tuleap_synchro | "Source" Project:{{/ dgettext }}
            </h2>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-username_source">
                    {{# dgettext }} tuleap-tuleap_synchro | Username ("Source" Project):{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="text"
                       class="tlp-input"
                       id="tuleap_synchro-username_source"
                       name="tuleap_synchro-username_source"
                       placeholder="admin"
                       required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-password_source">
                    {{# dgettext }} tuleap-tuleap_synchro | Password ("Source" Project):{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="password"
                       class="tlp-input"
                       id="tuleap_synchro-password_source-append-button"
                       name="tuleap_synchro-password_source"
                       placeholder="************"
                       required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-base_uri">
                    {{# dgettext }} tuleap-tuleap_synchro | Base URI's "Source" Project:{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <div class="tlp-form-element tlp-form-element-prepend">
                    <span class="tlp-prepend"><i class="fa fa-globe"></i></span>
                    <input type="url"
                           class="tlp-input"
                           id="tuleap_synchro-base_uri"
                           name="tuleap_synchro-base_uri"
                           placeholder="https://dev.aio/api/"
                           required
                    >
                </div>
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-project_source">
                    {{# dgettext }} tuleap-tuleap_synchro | "Source" Project's Shortname:{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="text"
                       class="tlp-input"
                       id="tuleap_synchro-project_source"
                       name="tuleap_synchro-project_source"
                       placeholder="trackerBug"
                       required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-tracker_source">
                    {{# dgettext }} tuleap-tuleap_synchro | "Source" Tracker's Id:{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="number"
                       class="tlp-input"
                       id="tuleap_synchro-tracker_source"
                       name="tuleap_synchro-tracker_source"
                       placeholder="792"
                       required
                >
            </div>

            <hr class="tlp-modal-separator">

            <h2 class="tlp-modal-subtitle">
                {{# dgettext }} tuleap-tuleap_synchro | "Target" Project:{{/ dgettext }}
            </h2>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-username_target">
                    {{# dgettext }} tuleap-tuleap_synchro | Username ("Target" Project):{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="text"
                       class="tlp-input"
                       id="tuleap_synchro-username_target"
                       name="tuleap_synchro-username_target"
                       placeholder="admin"
                       required
                >
            </div>

            <div class="tlp-form-element">
                <label class="tlp-label" for="tuleap_synchro-project_target">
                    {{# dgettext }} tuleap-tuleap_synchro | "Target" Project's Shortname:{{/ dgettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="text"
                       class="tlp-input"
                       id="tuleap_synchro-project_target"
                       name="tuleap_synchro-project_target"
                       placeholder="import005"
                       required
                >
            </div>

        </div>

    <div class="tlp-modal-footer">

        <button type="reset"
                class="tlp-button-primary tlp-modal-action tlp-button-outline"
                data-dismiss="modal">
            {{# dgettext }} tuleap-tuleap_synchro | Cancel{{/ dgettext }}
        </button>

        <button type="submit"
                class="tlp-button-primary tlp-modal-action">
            <i class="tlp-button-icon fa fa-plus"></i>
            {{# dgettext }} tuleap-tuleap_synchro | Add endpoint{{/ dgettext }}
        </button>

    </div>
</form>
